<template>
    <!-- 层级面板 -->
    <div class="cascader">
        <div :style="{ minHeight: minHeight + 'px', maxHeight: maxHeight + 'px', transform: `translateY(${offset[parentIndex]}px)`,height: `${height[parentIndex]}px`}"
            class="cascader-panel"
            v-for="(panels, parentIndex) in options" :key="parentIndex">
            <ul>
                <li v-for="(item, index) in panels" @mouseenter="handleMouseEnter(item, parentIndex, index)" :key="index"
                    @click="getCheckedNodes(item, parentIndex)">
                    <slot :$row="item"></slot>
                </li>
            </ul>
        </div>
    </div>
</template>
  
<script setup lang="ts">
const props = defineProps({
    data: {
        type: Array,
        required: true,
    },
    minHeight: {
        type: Number,
        default: 200,
    },
    maxHeight: {
        type: Number,
        default: 400,
    }
});

export interface Option{
    id: number;
    label: string;
    icon: string;
    children: Option[];
    [key: string]: any; // 使用索引签名定义其他属性类型为任意
}
const options = ref([props.data as Option[]]);

let offset = ref([0]);
let height =  ref([0]);

const handleMouseEnter = (item: Option, parentIndex: number, index: number) => {    
    offset.value[parentIndex+1]=index*32 + offset.value[parentIndex];
    // 截取数组到当前级别并添加新的子级
    if (item.children) {
        options.value = options.value.slice(0, parentIndex + 1);
        options.value.push(item.children);
        calcHeight(parentIndex + 1);
    }else{
        options.value = options.value.slice(0, parentIndex + 1);
    }
};

let $emit = defineEmits(['getCheckedNodes']);
//触发自定义事件
const getCheckedNodes = (item: any, index: number) => {
    if (index === options.value.length - 1) {
        // console.log('选中节点',item,index);
        $emit('getCheckedNodes', item);
    }
};

const calcHeight = (index: number)=>{
    let tempH = options.value[index].length * 32 + 12;
    if (tempH<200){
        height.value[index]=200;
    }else if(tempH>800){
        height.value[index]=800;
    }else{
        height.value[index]=tempH;
    }
};

onMounted(()=>{
    calcHeight(0);
})
</script>
  
<style scoped lang="scss">
.cascader {
    display: flex;       
}

.cascader-panel {
    background-color: var(--el-bg-color-overlay);    
    border-radius: 8px;
    border: 0.5px solid var(--el-border-color-lighter);    
    box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    ul {
        font-size: 14px;
        color: var(--el-text-color-primary);
        list-style: none;
        display: flex;
        flex-direction: column;
        padding: 5px;
        margin: 0;
    }

    li {
        padding: 2px 5px 2px 10px;
        margin: 2px 0;
        border-radius: 4px;
        display: flex;
        align-items: center;
        height: 28px;
        cursor: pointer;
    }

    li:hover {
        background-color: var(--el-fill-color);
    }
}
.cascader-panel::-webkit-scrollbar {    
    width: 13px;    
}
.cascader-panel::-webkit-scrollbar-track {    
    border-radius: 8px;
}
</style>